import { Layout, Menu, ConfigProvider } from "antd";
import {
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import useStore from "@/hooks/useStore";

const { Sider } = Layout;

interface IProps {
  collapsed: boolean;
}

const HL_Sider = (props: IProps) => {
  const { systemStore } = useStore();

  return (
    <>
      <ConfigProvider
        theme={{
          components: {
            Layout: {
              siderBg: "var(--ant-color-bg-container)",
            },
            Menu: {
              itemSelectedColor: "var(--ant-color-white)",
              itemSelectedBg: "var(--ant-color-primary)",
              itemHeight: "52px",
              fontSize: 16,
              itemMarginInline: 16,
              itemMarginBlock: 4,
              itemPaddingInline: 16,
              itemBorderRadius: 8,
              activeBarBorderWidth: 0,
            },
          },
        }}
      >
        <Sider
          trigger={null}
          collapsible
          collapsed={props.collapsed}
          width={250}
        >
          <div className="h-full flex flex-col">
            <div className="flex align-center justify-center px-xs py-xs">
              <img src={systemStore.logo} height={50} />
            </div>
            <div className="flex-grow scroll-y">
              <Menu
                mode="inline"
                defaultSelectedKeys={["1"]}
                items={[
                  {
                    key: "1",
                    icon: <UserOutlined />,
                    label: "nav 1",
                    children: [
                      {
                        key: "4",
                        icon: <UserOutlined />,
                        label: "nav 4",
                      },
                      {
                        key: "5",
                        icon: <UserOutlined />,
                        label: "nav 5",
                      },
                    ],
                  },
                  {
                    key: "2",
                    icon: <VideoCameraOutlined />,
                    label: "nav 2",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                  {
                    key: "3",
                    icon: <UploadOutlined />,
                    label: "nav 3",
                  },
                ]}
              />
            </div>
          </div>
        </Sider>
      </ConfigProvider>
    </>
  );
};

export default HL_Sider;
